// pages/product/product.js
import { Product } from '../../model/product.js';
import { User } from '../../model/user.js';
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min')
var qqmapsdk;
var product = new Product();
var user = new User();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    hidden: false,
    info: {},
    userInfo: {},
    id:0,
    evalatImage:'',
    bgBanner:'',
    imagePath:"",
    maskHidden:false,
    qrcode_image:'',
    showShare: false,
    options: [
      { name: '发送给好友', icon: 'wechat', openType: 'share' },
      { name: '分享到朋友圈', icon: '/utils/image/moments.png'  },
    ],
  },
  openShare(event) {
    this.setData({ showShare: true });
  },

  onClose() {
    this.setData({ showShare: false });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.showLoading({
      title: '加载中',
    });
    console.log(options.scene);
      const scene = decodeURIComponent(options.scene)
    if (scene && scene != 'undefined'){
      this.createInvite(scene.substr(0,scene.indexOf("pid=")))
      this.setData({
        id:scene.substr(scene.indexOf("pid=")+4,scene.length)
      })
      this.getProductInfo(scene.substr(scene.indexOf("pid=") + 4, scene.length));
    }else{
      this.setData({
        id:options.id
      })
      this.getProductInfo(options.id);
    }
    
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  chackimg: function () {
    var  that = this;
    wx.getImageInfo({
      src: that.data.info.img.url,
      success(res) {
        that.setData({
          evalatImage: res.path
        })
      }
    })
    wx.getImageInfo({
      src: that.data.qrcode_image,
      success(res) {
        that.setData({
          qrcode_image: res.path
        })
      }
    })
  },


  setproductcode(){
      var that = this;
      var data={
        project_id: that.data.id,
        userid: that.data.userInfo.id
      };
      product.setProductCode(data,(result)=>{
          that.setData({
            qrcode_image:result.url
          })
          that.chackimg();
      })
  },

  createInvite(scene){
    user.createInvite({scene:scene},(res)=>{})
  },

  /**
   * 拨打电话
   */
  callPhone(e) {
    wx.makePhoneCall({
      phoneNumber: e.currentTarget.dataset.phone
    })
  },
  openAdvertisement() {
    wx.navigateTo({
      url: 'Advertisement',
    })
  },
  /**
   * 获取产品详情
   */
  getProductInfo(id) {
    var WxParse = require('./../../utils/wxParse/wxParse.js');
    product.getProductInfo(id,(result)=>{
      console.log(result);
      WxParse.wxParse('currentContent', 'html', result.desc, this, 5);
      this.setData({
        info: result,
      })
      if(result.up_down == 2) {
        wx.hideLoading();
        wx.showModal({
          title: '温馨提示',
          content: '产品已下架',
          showCancel: false,
          confirmText: '知道了',
          confirmColor: '#F3474E',
          success:function(res){
            if (res.confirm){
              wx.switchTab({
                url: '/pages/home/home',
              })
            }
          }
        })
        return false;
      }
      this.getUserInfo();
    })
  },
  /**
   * 获取用户信息
   */
  getUserInfo() {
    user.getUserInfo((result)=>{
      this.setData({
        userInfo: result,
        hidden: true,
      })
      this.setproductcode();
      wx.hideLoading();
    })
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (options) {
    // 设置转发内容
    var shareObj = {
      path: 'pages/product/product?scene=user-' + this.data.userInfo.id+"pid="+this.data.id, // 默认是当前页面，必须是以‘/’开头的完整路径
      success: function (res) {　 // 转发成功之后的回调　　　　　
        if (res.errMsg == 'shareAppMessage:ok') {
        }
      },
      fail: function () {　// 转发失败之后的回调
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          // 用户取消转发
        } else if (res.errMsg == 'shareAppMessage:fail') {
          // 转发失败，其中 detail message 为详细失败信息
        }
      },
      complete: function () {
        // 转发结束之后的回调（转发成不成功都会执行）
      }
    };
    // 来自页面内的按钮的转发
    if (options.from == 'button') {
      // 此处可以修改 shareObj 中的内容
      shareObj.path ='pages/product/product?scene=user-' + this.data.userInfo.id+"pid="+this.data.id;
    }
    // 返回shareObj
    console.log(shareObj);
    return shareObj;
  },

  /**
  * 打开首页
  */
  onClickHome() {
    wx.switchTab({
      url: '/pages/home/home',
    })
  },
  /**
  * 打开订单页
  */
 onClickOrder() {
  wx.switchTab({
    url: '/pages/order/order',
  })
},
/**
 * 订单结算页
 */
onClickConfirm() {
  const _this = this
  wx.navigateTo({
    url: `/pages/confirm/confirm?id=${_this.data.info.id}&team_user_id=0`,
  })
},

openMap() {
  const _this = this
  // wx.navigateTo({
  //   url: `store_map?coordinate=${_this.data.info.store.coordinate}&title=${_this.data.info.store.name}`,
  // })
    // 使用 JavaScript SDK 获取目的地经纬度
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'RQLBZ-5XUK3-3JI3R-YJHBW-ILH55-2QB3N'
    });

    // 使用微信内置地图查看位置
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success: function(res) {
        const latitude = _this.data.info.store.coordinate.split(',')[0];
        const longitude = _this.data.info.store.coordinate.split(',')[1];
        wx.openLocation({
          'latitude':Number(latitude),
          'longitude':Number(longitude),
          scale: 28,
          name: _this.data.info.store.name
        })
      }
    })
},


//点击生成海报
formSubmit: function (e) {
  this.setData({ showShare: false });
  var that = this;
  wx.showToast({
    title: '海报生成中...',
    icon: 'loading',
    duration: 1000
  });
  that.createNewImg();
  setTimeout(function () {
    wx.hideToast()
    that.setData({
      maskHidden: true
    });
  }, 1000);
},
//将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
createNewImg: function () {
  var that = this;
  var context = wx.createCanvasContext('mycanvas');
  context.clearRect(0, 0, 375, 580);
  context.setFillStyle("#fff")
  context.fillRect(0, 0, 375, 580)
  context.save();

  var path = that.data.evalatImage;
  context.drawImage(path, 0, 0, 375, 383);


  var path2 = that.data.qrcode_image;
  console.log("海报底部二维码" + path2);

  //产品名称
  // context.setFontSize(16);
  // context.setFillStyle('#000');
  // context.setTextAlign('left');
  // context.fillText(that.data.info.name, 150, 530);
  // context.stroke();
  // context.save();

  //店铺联系方式
  context.font="40px Arial";
  context.setFontSize(16);
  context.setFillStyle('#666666');
  context.setTextAlign('left');
  context.fillText('电话：'+that.data.info.store.phone, 125, 520);
  context.stroke();
  context.save();

  //产品价格
  context.setFontSize(24);
  context.setFillStyle('#F3474E');
  context.setTextAlign('left');
  context.fillText('￥'+that.data.info.present_price, 270, 415);
  context.stroke();
  context.save();

  //店铺名称
  context.setFontSize(16);
  context.setFillStyle('#666666');
  context.setTextAlign('left');
  that.dealWords({
    ctx: context,                     //画布上下文 canvasID
    fontSize: 16,                //字体大小
    word: '店铺：'+that.data.info.store.name,                 //需要处理的文字
    maxWidth: 240,             //一行文字最大宽度
    x: 125,                   //文字在x轴要显示的位置
    y: 425,                      //文字在y轴要显示的位置
    maxLine: 5             //文字最多显示的行数
  });
  context.stroke();
  context.save();
  


  //店铺地址
  context.setFontSize(16);
  context.setFillStyle('#666666');
  context.setTextAlign('left');
  that.dealWords({
    ctx: context,                     //画布上下文 canvasID
    fontSize: 16,                //字体大小
    word: '地址：'+that.data.info.store.address,                 //需要处理的文字
    maxWidth: 240,             //一行文字最大宽度
    x: 125,                   //文字在x轴要显示的位置
    y: 450,                      //文字在y轴要显示的位置
    maxLine: 5             //文字最多显示的行数
  });
  context.stroke();
  context.save();

  // var titl = that.data.info.name;
  // context.setFontSize(18);
  // context.setFillStyle('#333');
  // context.setTextAlign('left');
  // context.font = 'normal bold 18px sans-serif';
  // context.fillText(titl, 60, 270);
  // context.stroke();
  // context.save();


  //绘制头像
  

  context.save(); //保存之前的画布设置
  context.beginPath();
  context.arc(72, 490, 80, 0, 2 * Math.PI);
  context.setStrokeStyle("#ffe200");
  context.clip(); //裁剪上面的圆形
  context.drawImage(path2, 8, 420, 110, 110);
  context.restore();
  context.closePath();

  context.save(); //保存之前的画布设置
  context.beginPath();
  // context.setFontSize(16);
  context.setFillStyle('#fff');
  context.setTextBaseline("top");
  context.setTextAlign('left');
  // context.font = 'normal 18px arial';
   //context.fillText("预防疫情四大宅家心理健康测评", 115, 565);
  // context.fillText("预防疫情四大宅家心理健康测评", 115, 589);
  
  context.stroke();
  context.closePath();
  context.save(); //保存之前的画布设置
  context.draw(true);//true表示保留之前绘制内容


  //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
  setTimeout(function () {
    wx.canvasToTempFilePath({
      canvasId: 'mycanvas',
      success: function (res) {
        var tempFilePath = res.tempFilePath;
        that.setData({
          imagePath: tempFilePath
        });
      },
      fail: function (res) {
        console.log(res);
      }
    });
  }, 1000);
},
//文本换行
dealWords(options) {
  options.ctx.setFontSize(options.fontSize);//设置字体大小
  var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//实际总共能分多少行
  var count = allRow >= options.maxLine ? options.maxLine : allRow;//实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数

  var endPos = 0;//当前字符串的截断点
  for (var j = 0; j < count; j++) {
    var nowStr = options.word.slice(endPos);//当前剩余的字符串
    var rowWid = 0;//每一行当前宽度    
    if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果当前的字符串宽度大于最大宽度，然后开始截取
      for (var m = 0; m < nowStr.length; m++) {
        rowWid += options.ctx.measureText(nowStr[m]).width;//当前字符串总宽度
        if (rowWid > options.maxWidth) {
          if (j === options.maxLine - 1) { //如果是最后一行
            options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 25);    //(j+1)*20这是每一行的高度        
          } else {
            options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 25);
          }
          endPos += m;//下次截断点
          break;
        }
      }
    } else {//如果当前的字符串宽度小于最大宽度就直接输出
      options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 25);
    }
  }
},
  //点击保存到相册
  baocun: function () {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imagePath,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册，赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#333',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              /* 该隐藏的隐藏 */
              that.setData({
                maskHidden: false
              })
            }
          }, fail: function (res) {
            console.log(11111)
          }
        })
      }
    })
  }
  
})